<template>
   <div class="container">
        <div class="card">
          <el-breadcrumb separator="/" class="card-body">
            <el-breadcrumb-item :to="{ path: '/AdminHome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>{{ this.$route.meta.title }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="card">
            <div class="card-header">供应商查询</div>
            <div class="card-body">
                <div class="query-criteria clearfix">
                    <el-form :inline="true" :model="SupplierSort" class="demo-form-inline f-left">
                        <div class="el-form-item el-form-item--small"><label class="el-form-item__label">快速查询</label></div>
                        <el-form-item>
                            <el-input  v-model.trim="formQuery.name" placeholder="表单名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit(formQuery)" >查询</el-button>
                        </el-form-item>
                    </el-form>
                    <div class="f-right">
                        <el-button type="warning" icon="el-icon-plus" @click="create">添加表单</el-button>
                    </div> 
                </div>
            </div>
        </div>
        <div class="card User-list">
          <div class="card-header">供应商列表</div>
          <div class="card-body">
            <el-table stripe ref="multipleTable" v-loading="isLoading" :data="tableData" tooltip-effect="dark" style="width: 100%" scope="scope">
                <el-table-column label="序号" >
                   <template slot-scope="scope">
                     {{scope.$index + 1}}
                   </template>
                </el-table-column>
                <el-table-column prop="name" label="名称" >
                </el-table-column>
                <el-table-column prop="typeId" label="类别" >
                </el-table-column>
                <el-table-column label="操作" fixed="right" >
                  <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="detail(scope.row.id)">查看</el-button>
                    <el-button size="mini" type="text" @click="toUpdate(scope.row.id)">编辑</el-button>
                    <el-button size="mini" type="text" @click="delSupplier(scope.$index, scope.row.id)">删除</el-button>
                  </template>
                </el-table-column>
            </el-table>
          </div>
          <div class="page-wrap" v-if="pagesTotal>10">
              <el-pagination background @size-change="sizeChange" @current-change="currentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pagesTotal">
              </el-pagination>
          </div>
        </div>
    </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "Classification",
  data() {
    return {
      tableData:"",
      isLoading: false,
      formQuery: {
        name: "",
        typeId:""
      },
      SupplierData: "",

      pageSize: 10,
      pagesTotal: 0,
      currentPage: 1
    };
  },
  methods: {
    onSubmit(){
      this.getClassList();
    },
    updateClassification(id) {
      this.$router.push({
        path: "/SystemSetting/FormSetting/update" + "?id=" + id
      });
    },
    create(id) {
      this.$router.push({
        path: "/SystemSetting/FormSetting/create"
      });
    },
    delteAsset(id) {
      this.$confirm("确认删除这个分类？")
        .then(_ => {
          request({
            method: "get",
            url: this.$api.deletSort + `?id=${id}`
          }).then(res => {
            //刷新页面
            this.getTreeData();
          });
        })
        .catch(_ => {});
    },
    handleNodeClick(data) {
      //通过ID刷新右边分类数据
      let limit = this.pageSize;
      let id = data.id;
      let offset = 1;
      this.className = data.label;
      this.classId = data.id;
      this.getClassList(limit, id, offset);
    },
    attribute(id) {
      console.log("属性列表添加");
      this.$router.push({
        path: "/SystemSetting/FormSettingAttriBute/AttriBute" + "?id=" + id
      });
    },
    getClassList(limit = 10, offset = 1) {
      this.isLoading = true;
      //获取分类列表 默认 每页10条 第1页
      request({
        url:
          this.$api.queryForPageFlowForm +
          `?limit=${limit}&name=${this.formQuery.name}&offset=${offset}&typeId=${this.formQuery.typeId}`,
        method: "get"
      }).then(res => {
        this.tableData = res.data.list;
        this.pagesTotal = res.data.total;
        this.pageSize = res.data.pageSize;
        this.isLoading = false;
      });
    },
    sizeChange(pageSize) {
      let offset = this.currentPage;
      let limit = (this.pageSize = pageSize);
      let id = this.classId;
      this.getClassList(limit, id, offset);
    },
    currentChange(currentPage) {
      let offset = currentPage;
      let limit = this.pageSize;
      let id = this.classId;
      this.getClassList(limit, id, offset);
    },
    detail(id) {
      this.$router.push({
        path: "/SystemSetting/FormSetting/Detail" + "?id=" + id
      });
    },
    toUpdate(id) {
      this.$router.push({
        path: "/SystemSetting/FormSetting/Update" + "?id=" + id
      });
    },
  },
  mounted() {
  this.getClassList();
  },
  computed: {
    cardBodyHeight: function() {
      let boxHeight = window.innerHeight - 149;
      return boxHeight;
    }
  }
};
</script>

<style lang="less" scoped>
.classfy-tree {
  width: 220px;
  float: left;
  position: relative;
  z-index: 1;
  background: #f9fafc;
  border-right: 1px solid #ebeef5;
  .card-header {
    border-bottom: 1px solid #e4e6e9;
  }
  .el-tree {
    padding: 10px;
    background: transparent !important;
  }
}

.classfy-data {
 // padding-left: 221px;
  position: relative;
  z-index: 0;
  .card-header {
    line-height: 51px;
    height: 54px;
  }
  .e_inner_text {
    color: #000;
    font-size: 18px;
    line-height: 54px;
  }
}

.header-console{
  span{
    font-size: 12px;
    color: #375686;
  }
}

</style>